<template>
  <el-row>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ name: 'dashboard' }">控制台</el-breadcrumb-item>
      <el-breadcrumb-item>意见反馈</el-breadcrumb-item>
    </el-breadcrumb>

    <blank />

    <el-row>
      <el-col :span="24">
        <el-button type="text" class="del-selections" @click="delSelections()">删除选中项</el-button>
      </el-col>
    </el-row>

    <blank />

    <el-row>
      <el-table :data="feedbacks" style="width: 100%" stripe @select-all="all" @select="select">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column prop="OpenId" label="OpenId" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="Name" label="姓名" width="120">
        </el-table-column>
        <el-table-column prop="Phone" label="电话" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="Detail" label="反馈" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="Time" label="时间" show-overflow-tooltip>
        </el-table-column>
        <el-table-column label="操作">
          <template scope="scope">
            <span class="watch-images" @click="watchImages(scope.row.Images)">看图</span>
            &nbsp;&nbsp;&nbsp;&nbsp;
            <span class="delete-feedback" @click="delFB(scope.$index, scope.row)">删除</span>
            &nbsp;&nbsp;&nbsp;&nbsp;
            <span class="change-state" :class="{ 'color-green': scope.row.IsRead }" @click="changeRead(scope.row)">{{ scope.row.IsRead | isRead }}</span>
          </template>
        </el-table-column>
      </el-table>
    </el-row>

    <blank />

    <el-row>
      <el-col :span="24">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </el-col>
    </el-row>

    <el-dialog title='查看图片' v-model="callDialog">
      <div class="preview-container" v-if="previewSrc">
        <div v-for="imgSrc in previewSrc" :key="imgSrc.Id">
          <img :src=" domain + '/' + imgSrc" class="preview-img" />
          <blank />
        </div>
      </div>
    </el-dialog>

  </el-row>
</template>

<script>
  import blank from '@/components/Blank'
  import { Message, MessageBox } from 'element-ui'
  import router from '@/router'
  import ax, { errhandler, domain } from '@/api/_axios-config'
  import * as apis from '@/api/_api'

  export default {
    name: 'feedback',
    filters: {
      isRead: function (isread) {
        if (isread) {
          return '已处理'
        } else {
          return '未处理'
        }
      },
      isReadColor: function (isread) {
        if (isread) {
          return 'success'
        } else {
          return 'warning'
        }
      }
    },
    data () {
      return {
        currentPage: 1,
        pageSize: 20,
        total: 100,
        feedbacks: [],
        deleteIds: [],
        callDialog: false,
        previewSrc: '',
        domain: domain
      }
    },
    methods: {
      handleSizeChange (size) {
        this.pageSize = size
        this.getFB(this.pageSize, this.currentPage)
      },
      handleCurrentChange (page) {
        this.currentPage = page
        this.getFB(this.pageSize, this.currentPage)
      },
      changeRead (row) {
        ax.patch(apis.READ, { id: row.Id, read: !row.IsRead }).then(
          response => {
            let result = response.data
            if (result.BoolStatus) {
              Message.success('修改状态成功')
              row.IsRead = !row.IsRead
            } else {
              Message.error(result.Message)
            }
          }
        ).catch(
          err => {
            errhandler(err)
          }
        )
      },
      getFB (pageSize, page) {
        ax.get(apis.FEEDBACK, { params: { pageSize: pageSize, page: page } }).then(
          response => {
            let result = response.data
            if (result.BoolStatus) {
              this.feedbacks = result.Data.data
              this.total = result.Data.totalCount
            } else {
              Message.info('未获取反馈信息')
            }
          }
        ).catch(
          err => {
            errhandler(err)
          }
        )
      },
      selectHandle (selections) {
        let ids = []
        selections.forEach(function (item) {
          ids.push(item.Id)
        })
        this.deleteIds = ids
      },
      all (selections) {
        this.selectHandle(selections)
      },
      select (selections, row) {
        this.selectHandle(selections)
      },
      delFB (index, row) {
        MessageBox.confirm('确定删除该反馈？', '提示', {
          confirmButtonText: '删除',
          cancelButtonText: '取消',
          type: 'info'
        }).then(() => {
          let ids = [ row.Id ]
          ax.delete(apis.FEEDBACK_DELETE, { data: ids }).then(
            response => {
              var result = response.data
              if (result.BoolStatus) {
                this.feedbacks.splice(index, 1)
                Message.success('删除成功')
              } else {
                Message.success('删除失败')
              }
            }
          ).catch(
            err => {
              errhandler(err)
            }
          )
        }).catch(() => {
          Message.info('取消删除操作')
        })
      },
      delSelections () {
        if (this.deleteIds === [] || this.deleteIds.length <= 0) {
          Message.info('未选中任何元素')
          return
        }
        MessageBox.confirm('确定删除选中的反馈？', '提示', {
          confirmButtonText: '删除',
          cancelButtonText: '取消',
          type: 'info'
        }).then(() => {
          ax.delete(apis.FEEDBACK_DELETE, { data: this.deleteIds }).then(
            response => {
              var result = response.data
              if (result.BoolStatus) {
                Message.success('删除成功')
                router.go(0)
              } else {
                Message.success('删除失败')
              }
            }
          ).catch(
            err => {
              errhandler(err)
            }
          )
        }).catch(() => {
          Message.info('取消删除操作')
        })
      },
      watchImages (src) {
        if (src) {
          this.callDialog = true
          this.previewSrc = src.split(';')
        }
      }
    },
    created: function () {
      this.getFB(this.pageSize, this.currentPage)
    },
    components: { blank }
  }
</script>

<style lang="stylus">
  .delete-feedback
  .change-state
    color #FF4949
    font-weight bold
    cursor pointer
  
  .del-selections
    font-weight bold
    cursor pointer
    color #FF4949
  
  .color-green
    color #13CE66

  .watch-images
    color #8552a1
    font-weight bold
    cursor pointer

  div.preview-container
    width 100%
    div
      img.preview-img
        display block
        max-width 100%
        margin auto
        border 1px solid gray
</style>
